<template>
  <div class="register" :class="themeClass">
    <v-loading v-if="loading" />
    <div class="register_top">
      <v-nav icon_name="down"></v-nav>
    </div>
    <div class="register_box">
      <div class="register_box_desc">
        <h2>{{ $t('Update.Reset login password') }}</h2>
      </div>
      <div class="register_box_form">
        <van-form>
          <div class="email_number">
            <van-field v-model="form.email_number" :placeholder="$t('Update.Please enter your email address')" @input="reset" />
            <van-icon @click="form.email_number = ''" v-if="form.email_number !== ''" name="clear" />
          </div>
          <div class="verification_code">
            <van-field v-model="form.verification_code" :placeholder="$t('Update.Please enter the verification code')" />
            <van-button color="#daab51" style="min-width: 70px" @click="getEmailCode">{{ sendBtnText }}</van-button>
          </div>
          <div class="password">
            <van-field v-model="form.password" :type="view_pwd ? '' : 'password'" :placeholder="$t('Update.Please enter the password')" />
            <van-icon :name="view_pwd ? 'eye-o' : 'closed-eye'" @click="viewPwd('view_pwd')" />
          </div>
          <div class="confirm_password password">
            <van-field v-model="form.confirm_password" :type="view_confirm_pwd ? '' : 'password'" :placeholder="$t('Update.Please enter the confirmation password')" />
            <van-icon :name="view_confirm_pwd ? 'eye-o' : 'closed-eye'" @click="viewPwd('view_confirm_pwd')" />
          </div>

          <div class="submit_btn">
            <van-button block type="default" native-type="submit" @click="onSubmit">{{ $t('Update.Confirm reset') }}</van-button>
          </div>
        </van-form>
      </div>
    </div>
    <v-custom-service />
  </div>
</template>
<script>
export default {
  name: 'register',
  data() {
    return {
      form: {
        email_number: '',
        verification_code: '',
        password: '',
        confirm_password: ''
      },
      view_pwd: false, //显示密码
      view_confirm_pwd: false, //显示确认密码
      loading: false, //是否加载中
      isSmsSend: false, // 发送验证 是否禁用
      isDayTime: false, // 暗黑模式
      sendBtnText: this.$t('Update.Get verification code'), //发送验证提示
      timer: null, //发送验证计时器
      counter: 60 //发送验证秒数
    }
  },
  created() {},
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  methods: {
    viewPwd(type) {
      this[type] = !this[type]
    },
    reset() {
      this.sendBtnText = this.$t('Update.Get verification code')
      if (this.timer) {
        clearInterval(this.timer)
        this.counter = 60
        this.timer = null
        this.isSmsSend = false
      }
    },
    countDown() {
      this.isSmsSend = true
      this.sendBtnText = `(${this.counter}s)`
      this.timer = setInterval(() => {
        this.counter--
        this.sendBtnText = `(${this.counter}s)`
        if (this.counter < 0) {
          this.reset()
        }
      }, 1000)
    },
    async getEmailCode() {
      if (this.form.email_number.trim() === '') {
        this.$toast(this.$t('Update.Please enter your email address'))
        return
      }
      this.loading = true
      await this.$https.post('/ems/send', { email: this.form.email_number, event: 'user_retrieve_pwd' }).then(res => {
        if (res != undefined && res.code == 1) {
          this.countDown()
        }
      })
      this.loading = false
    },
    async onSubmit() {
      if (this.form.email_number.trim() === '') {
        this.$toast(this.$t('Update.Please enter your email address'))
        return
      }
      if (this.form.verification_code.trim() === '') {
        this.$toast(this.$t('Update.Please enter the verification code'))
        return
      }
      if (this.form.password.trim() === '') {
        this.$toast(this.$t('Update.Please enter the password'))
        return
      }
      if (this.form.confirm_password.trim() === '') {
        this.$toast(this.$t('Update.Please enter the confirmation password'))
        return
      }
      if (this.form.password.trim() !== this.form.confirm_password.trim()) {
        this.$toast(this.$t('Update.Inconsistent passwords'))
        return
      }
      this.loading = true
      const params = {
        captcha: this.form.verification_code,
        password: this.form.password,
        email: this.form.email_number
      }
      await this.$https.post('/user/forgotPassword', params).then(res => {
        if (res != undefined && res.code == 1) {
          this.$router.push('/signIn')
        }
      })
      this.loading = false
    }
  }
}
</script>
<style lang="less">
@import './index.less';
</style>
